<!DOCTYPE html>
<html>
    <head>
        <title>CSS Regions Test: DOM order is different than the linear selection</title>
        <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#relation-to-document-events">
        <meta name="assert" content="CSS regions module does not alter the normal processing of events in the document
         tree. Therefore, mouse selection should capture content in DOM order as it would without a named flow.">
        <meta name="flags" content="dom interact">
        <link href="/resources/testharness.css" rel="stylesheet" type="text/css">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <script src="support/js/selection-test-helper.js"></script>
        <style>
            #source 
            {
                position: absolute;
                flow-into: content;
            }
            .region
            {
                flow-from: content; 
                width: 150px;
                height: 150px;
                margin: 15px;
            }
            #region 
            {
                position: absolute;
                left: 0px;
                color: red;
            }
            #region-2 
            { 
                position: absolute;
                left: 330px;
            }
            #region-3
            { 
                position: absolute;
                left: 165px;
            }
            #start-select
            {
                background-color: orange;
            }
            #end-select
            {
                background-color: blue;
            }
            .select-point
            {
                width: 15px;
                height: 15px;
                display: inline-block; 
            }
            #log {
              position: relative;
              top: 175px;
              clear: both;
            }
        </style>
    </head>
    <body>
        <p id="msg">
            Click on the orange square, keep the mouse button down and drag it to the blue square, 
            release the mouse over the blue square.
        </p>
        <!-- This text will only appear if regions are not enabled -->
        <div id="region" class="region">REGIONS ARE NOT ENABLED</div>
        <div id="region-2" class="region"></div>
        <div id="region-3" class="region"></div>
        <div id="source">
            <span id="two-regions">
                <div id="start-select" class="select-point"></div> 
                between the squares between the squares between the squares between the squares between the squares 
                between the squares between the squares between the squares between the squares between the squares 
                between the squares between the squares between the squares 
                <div id="end-select" class="select-point"></div>
            </span>
            <span id="one-region"> 
                after the squares after the squares after the squares after the squares after the squares 
                after the squares after the squares after the squares after the squares after the squares 
                after the squares after the squares 
            </span>
        </div>
        <div id="log"></div>
        <script>
             runSelectionTest( [ { string: "after the squares", expected: false }], true);
        </script>
    </body>
</html>
